<template>

    <div style="width: 50%;border: #8c939d 1px solid;padding: 5px;
        box-shadow: 2px 2px 3px #d7d1d1;">

        <div >
            <el-form label-width=80px >
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8081/file/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                    <img v-if="user.avatar" :src="user.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-form-item label="用户名" >
                    <el-input v-model="user.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" >
                    <el-input v-model="user.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" >
                    <el-input v-model="user.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" >
                    <el-input v-model="user.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" >
                    <el-input v-model="user.address" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" style="text-align: center">
                <el-button type="primary" @click="updateUser">确定修改</el-button>
            </div>
        </div>





    </div>
</template>

<script>
    export default {
        name: "Profile",
        data(){
            return{
                user:{
                    username: "",
                    nickname: "",
                    phone: "",
                    email: "",
                    address: "",
                    avatar:"",
                },
                old_username:""
            }
        },
        created: function () {
            let old_user= window.JSON.parse(localStorage.getItem("user"));
            this.old_username =old_user.username;
            this.user.username=old_user.username;
            this.user.email=old_user.email;
            this.user.phone=old_user.phone;
            this.user.address=old_user.address;
            this.user.nickname=old_user.nickname;
            this.user.avatar=old_user.avatar;

        },
        methods:{
            updateUser() {
                this.request.post("user/updateUser", {
                    user: this.user,
                    old_username: this.old_username,
                    avator:this.avator
                }).then(res => {
                    if (res.code === "200") {
                        this.$message.success("更新用户信息成功");
                        localStorage.setItem("user", window.JSON.stringify(res.data));
                        location.reload();
                    }
                })
            },
            handleAvatarSuccess(res){
                this.user.avatar=res;
            },
        },
    }
</script>

<style scoped>
    .avatar-uploader{
        text-align: center;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 150px;
        height: 178px;
        display: block;
    }
</style>